@mixin content_title{
  padding: 0 10px;
  border-bottom: 10px solid #f6f5f6;
  .title{
    padding: 10px 0;
    font: bold 16px '雅黑';
    border-bottom: 1px solid #cecece;
  }
}

.detail-page{
  .detail-navbar {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .am-navbar{
      width: 100%;
      background-color: #f4f4f4;
    }
  }

  .detail-content{
    height: calc(100vh - 95px);
    width: 100%;
    overflow-y: auto;

    .carousel{
      width: 100%;
      height: 200px;
      .img{
        width: 100%;
        height: 200px;
        object-fit: fill;
      }
    }

    .detail-info{
      @include content_title;
      .title{
        border: none;
      }
  
      .tags{
        padding-bottom: 10px;
        display: flex;
        .am-tag{
          height: auto;
          padding: 5px;
          margin-right: 5px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #e1f5f8;
          color: #39becd;
        }
      }
    }
    

    .message{
      font: 14px '黑体';
      color: #999;
      .top{
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        border-top: 1px solid #cecece;
        .price,
        .type,
        .size{
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 33.333%;
          padding-bottom:15px ;
          span:first-child{
            color: #fa5741;
            padding: 15px 0 5px;
          }
        }
        .price{
          span span{
            font:bold 18px '雅黑';
          }
        }
        .type,
        .size{
          span:first-child{
            font:bold 18px '雅黑';
          }
        }
      }
      .bot{
        padding: 5px 0;
        border-top: 1px solid #cecece;
        &>div{
          display: inline-block;
          width: 50%;
          padding: 10px;
          span:last-child{
            color: #333;
          }
        }
      }
    }

    .location{
      .community{
        padding: 10px;
        font: 14px '雅黑';
        color: #666;
        span:last-child{
          color: #333;
          margin-left: 10px;
        }
      }

      .map{
        width: 100%;
        height: 150px;
        overflow: hidden;
      }
    }

    .mating{
      @include content_title;
      
      .icons{
        padding:10px 0;
        display: flex;
        flex-wrap: wrap;
        .icon-item{
          padding: 5px 0;
          width: 20%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          i{
            font-size: 26px;
            margin-bottom: 3px;
          }
        }
      }
    }

    .condition{
      @include content_title;
     
      .content{
        padding: 20px 0;
        display: flex;
        justify-content: center;
        align-items: center;
        img{
          width: 52px;
          object-fit: cover;
          margin-right: 10px;
        }
        .message{
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: stretch;
          span{
            font: 14px '雅黑';
            color: #333;
            &:last-child{
              color: #fa5741;
              margin-top: 5px;
            }
          }
        }
        .send{
          padding: 5px 15px;
          border-radius: 5px;
          color: #33be85;
          border:1px solid #33be85;
        }
      }

      .desc{
        font: 14px '雅黑';
        color: #333;
        p{
          margin: 0;
          padding-bottom: 20px;
        }
      }
    }

    .guess{
      @include content_title;
      border: none;
      .info{
        .title{
          border-bottom: none;
          padding: 0;
        }
      }

      .list{
        margin-left: -10px;
        width: 100vw;
        padding: 10px 0;
      }

    }
  }
  .controller{
    height: 50px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font: 16px '雅黑';
    color: #999;
    border-top: 1px solid #e8e8e9;
    .item{
      width: 33.3333%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      border-right: 1px solid #e8e8e9;
      i{
        margin-right: 5px;
      }
    }      
  }
}
